import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';
import { Router } from '@angular/router'



@Component({
  selector: 'app-dts',
  templateUrl: './dts.component.html',
  styleUrls: ['./dts.component.less']
})
export class DTsComponent implements OnInit {

  public playList:any={}
  public songId:Array<any>=[]
  public dtString:string = "http://localhost:3000/song/detail?ids="
  public songs:Array<any>=[]
  public url:string =""
  public timer:any

  constructor(
    private http: HttpClient,
    private router: Router
  ) { }

  ngOnInit(): void {
    this.getListMsg();
    this.getSongs(10)
  }


  getListMsg(){
    this.playList = JSON.parse(window.localStorage.getItem('playList')||'')
    console.log(this.playList);
    
    const songs = JSON.parse(window.localStorage.getItem('songId')||'')
    for(var i =0;i<songs.length;i++){
      // 拿到歌曲id
      this.songId[i] = songs[i].id
      // 拿到歌曲详情的请求地址
      if(i==0){
        this.dtString = this.dtString+songs[i].id
      }
      else{
        this.dtString = this.dtString+","+songs[i].id
      }
      
    }
    console.log(this.songId);
  
  }
  getSongs(count:number){
    this.http.get(this.dtString).toPromise()
    .then((data:any)=>{
      console.log(data.songs);
      for (let index = 0; index < count-1; index++) {
        this.songs[index] = data.songs[index]
      }

    })
    .catch((err:any)=>{console.log('失败');
    })
  }

  backToHome(){
    window.localStorage.removeItem('playList')
    window.localStorage.removeItem('songId')
    this.router.navigate(["/"])
  }

  getSongUrl(){
    setTimeout(() => {
    this.url = window.localStorage.getItem("songUrl")||""
    const audioImg:any = document.querySelector('.audioImg')
    audioImg.src = window.localStorage.getItem('audioImgUrl')||''
    const audioName:any = document.querySelector('#audioName')
  audioName.value = window.localStorage.getItem('audioName')||''
    }, 1000);
    
  }
  

  playSong(id:number){
    console.log(id);
    this.http.get(`http://localhost:3000/song/url?id=${id}`).toPromise()
    .then((data:any)=> {
      window.localStorage.removeItem("songUrl")
      window.localStorage.setItem('songUrl',data.data[0].url)
    })
    .catch((err:any)=>{console.log('失败');
    })

    this.http.get(`http://localhost:3000/song/detail?ids=${id}`).toPromise()
    .then((data:any)=> {
      console.log(data);
      window.localStorage.removeItem("audioImgUrl")
      window.localStorage.setItem("audioImgUrl",data.songs[0].al.picUrl)
      window.localStorage.removeItem("audioName")
    window.localStorage.setItem("audioName",data.songs[0].name)
    })
    .catch((err:any)=>{console.log('失败');
    })
    
  }
  play(){
  setTimeout(() => {
    const mA:any = document.querySelector("#myAudio")
    const pT:any = document.querySelector("#playedTime")
  const done:any = document.querySelector(".done")
    mA.src=this.url
    console.log(this.url);
    
    if(mA.paused){
      mA.play();
        this.timer = setInterval(function(){
          let minute:any
          let second:any
          if(mA.currentTime<60){
            minute = "00"
            if(mA.currentTime<10){
              second = "0"+parseInt(mA.currentTime)
            }else
            second = parseInt(mA.currentTime)
          }
          else if(mA.currentTime>=60){
            minute = Math.floor(parseInt(mA.currentTime)/60)
            if(mA.currentTime%60<10){
              second = "0"+parseInt(mA.currentTime)%60
            }else
            second = parseInt(mA.currentTime)%60
          }
          done.style.width=(mA.currentTime/mA.duration)*100+"%"
          pT.value = minute+":"+second+"/"+"0"+Math.floor(parseInt(mA.duration)/60)+":"+parseInt(mA.duration)%60
        },1000)
  
  }else{
      mA.pause();
      clearInterval(this.timer)
  }
  }, 1500);
  
  }
}
